<template>
  <a-modal
    :title="title"
    :visible="visible"
    width="360px"
    cancelText="取消"
    okText="确定"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <CommonForm ref="commonFormRef" :formData="formData" :formJson="formJson" />
    <a-modal v-model="isIconShow" title="图标" :footer="false">
      <div class="icon-container">
        <div v-for="item in menuIconList" :key="item.type" class="icon" @click="handleSelectIcon(item)">
          <c-icon :type="item.type" />
        </div>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { addMenu, editMenuById, getMenuMap } from '@/api/system/menu'
import CommonForm from '@/components/CommonForm'
import { defaultStoreData } from '@/views/dashboard/EditDashboard/LowCode/lib/const'
import { menuIconList } from '../menuIcon'
import { foreachTree } from '@/utils/util'

const formData = {
  name: '',
  parentId: undefined,
  icon: '',
  show: 1,
  path: '',
  type: 1,
}
export default {
  components: {
    CommonForm,
  },
  data() {
    return {
      visible: false,
      formData: {
        ...formData,
      },
      parentData: [],
      title: '新增',
      type: 'add',
      isIconShow: false,
      menuIconList,
      menuOption: [],
    }
  },
  computed: {
    formJson() {
      const { type, formData, menuOption } = this
      foreachTree(menuOption, (node) => {
        node.disabled = formData.id === node.id
      })
      let filterMenuOption
      switch (formData.type) {
        case 1:
          filterMenuOption = []
          break
        case 2:
          foreachTree(menuOption, (node) => {
            node.disabled = node.type !== 1
          })
          filterMenuOption = menuOption
          break
        case 3:
          foreachTree(menuOption, (node) => {
            node.disabled = node.type !== 2
          })
          filterMenuOption = menuOption
          break
      }
      const disabled = type === 'details'

      const base = [
        {
          type: 'input',
          label: '名称',
          fieldName: 'name',
          extraConfig: {
            className: 'row',
            disabled,
          },
          rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          dataType: String,
        },

        {
          type: 'radio-group',
          label: '菜单类型',
          fieldName: 'type',
          extraConfig: { className: 'row', disabled },
          options: [
            {
              label: '目录',
              value: 1,
            },
            { label: '菜单', value: 2 },
            { label: '按钮', value: 3 },
          ],
          dataType: Number,
        },
      ]
      const parent = [
        {
          type: 'tree-select',
          label: '上级菜单',
          fieldName: 'parentId',
          extraConfig: {
            className: 'row',
            treeData: filterMenuOption,
            replaceFields: {
              children: 'children',
              title: 'name',
              key: 'id',
              value: 'id',
            },
            disabled,
          },
          dataType: Number,
        },
      ]
      const sort = [
        {
          type: 'number',
          label: '菜单排序',
          fieldName: 'serialNum',
          extraConfig: {
            className: 'row',
            disabled,
          },
          rules: [{ required: true, message: '菜单排序不能为空', trigger: 'blur' }],
          dataType: String,
        },
      ]
      const address = [
        {
          type: 'input',
          label: '菜单地址',
          fieldName: 'path',
          extraConfig: { className: 'row', disabled },
          dataType: String,
        },
      ]

      const icon = [
        {
          type: 'custom',
          rules: [{ required: true, message: '菜单图标不能为空', trigger: 'blur' }],
          render: (formData) => {
            return (
              <div>
                <a-form-model-item class="row" prop="icon" colon={false} label="菜单图标">
                  <a-input
                    disabled={disabled}
                    onClick={!disabled ? this.handleIconClick : () => {}}
                    value={formData['icon']}
                    readOnly
                  />
                </a-form-model-item>
              </div>
            )
          },
          dataType: String,
        },
      ]
      const permissions = [
        {
          type: 'input',
          label: '权限标识',
          fieldName: 'permission',
          extraConfig: {
            className: 'row',
            disabled,
          },
          dataType: String,
        },
      ]
      const render = [
        {
          type: 'input',
          label: '渲染组件',
          fieldName: 'component',
          extraConfig: {
            className: 'row',
            disabled,
          },
          rules: [{ required: true, message: '渲染组件不能为空', trigger: 'blur' }],
          dataType: String,
        },
      ]
      const show = [
        {
          type: 'radio-group',
          label: '是否显示',
          fieldName: 'show',
          extraConfig: {
            className: 'row',
            disabled,
          },
          options: [
            {
              label: '显示',
              value: 1,
            },
            {
              label: '隐藏',
              value: 0,
            },
          ],
          dataType: Boolean,
        },
      ]
      switch (formData.type) {
        case 1:
          return [...base, ...sort, ...icon, ...render, ...show]
        case 2:
          return [...base, ...parent, ...sort, ...icon, ...render, ...permissions, ...address, ...show]
        case 3:
          return [...base, ...parent, ...sort, ...permissions, ...show]
        default:
          return []
      }
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleOk() {
      if (this.type === 'details') {
        this.handleCancel()
        return false
      }
      const callBack = this.type === 'add' ? addMenu : editMenuById

      this.$refs.commonFormRef.form.validate((valid) => {
        if (valid) {
          callBack({
            ...this.formData,
            // actions: this.formData.actions || JSON.stringify([]),
            parentId: this.formData.parentId ? this.formData.parentId : 0,
          }).then((data) => {
            this.handleCancel()
            this.$message.success(`${this.title}成功`)
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.formData = {
        ...formData,
      }
      this.$emit('update')
    },
    show(type = 'add', val = {}) {
      this.type = type
      val.parentId = val.parentId === 0 ? undefined : val.parentId
      switch (type) {
        case 'add': {
          this.title = '新增'
          this.formData = {
            ...formData,
          }
          break
        }
        case 'edit': {
          this.title = '编辑'
          this.formData = {
            ...val,
          }
          break
        }
        case 'details': {
          this.title = '详情'
          this.formData = {
            ...val,
          }
          break
        }
      }

      this.visible = true
      console.log(this.formData)
    },
    handleIconClick() {
      this.isIconShow = true
    },
    handleSelectIcon(node) {
      this.formData.icon = node.type
      this.isIconShow = false
    },
    getData() {
      getMenuMap().then((data) => {
        this.menuOption = data
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
